import { Button, Input, message } from "antd"
import styles from './index.less'
import { useState } from "react"
import { addComment, addReComment } from "@/services/article"
import { useRequest } from "ahooks"
type Props = {
    onSubmit?: (v:any) => void,
    maxLength?: number,
    articleId?: string,
    targetUserId?: string,
    commentId?: string,
}
export default ({
    onSubmit,
    maxLength = 200,
    articleId,
    targetUserId,
    commentId,
}: Props) => {
    const [v, setV] = useState('')
    const { run,loading } = useRequest(articleId ? addComment : addReComment, {
        manual: true,
        debounceWait:1000,
        onSuccess: (res,[{content}]) => {
            setV('')
            onSubmit?.({
                content:content,
                id:res,
            })        
        }
    })

    return <div className={styles.container}>
        <Input.TextArea className={styles.input} value={v} onChange={(e) => setV(e.target.value)} maxLength={maxLength} autoSize={{ minRows: 3, maxRows: 6 }} placeholder="写下你的看法" />
        <div className={styles.footer}>
            <div>
                <span>{v.length}/{maxLength}</span>
            </div>
            <Button className={styles.btn} loading={loading} disabled={v.length === 0} onClick={() => {
                const p = articleId ? {
                    articleId,
                    content: v,
                } : {
                    content: v,
                    targetUserId,
                    commentId,
                }
                run(p)
            }}>
                发送
            </Button>
        </div>
    </div>
}